<!DOCTYPE html>
<!-- saved from url=(0027)http://www.hnjyxh.com/zcfg/ -->
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>悬赏两万元通缉珍湘酒·长沙酒文化节</title>
    <meta name="keywords" content="湖南省酒业协会 酒协 湖南酒业">
    <meta name="description" content="湖南省酒业协会">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="__STATIC__/home/jquery_weui/css/weui.min.css"/>
    <link rel="stylesheet" href="__STATIC__/home/jquery_weui/css/jquery-weui.min.css"/>
    {css href="__PUBLIC__static/home/css/jquery.jcrop.min.css"}
</head>
<style>
    #tpinfos{
        background-size: cover;
    }
    .fileInputContainer{
        height:173px;
        position:relative;
        width: 137px;
    }
    .fileInput{
        height:256px;
        font-size: 300px;
        position:absolute;
        right:0;
        top:0;
        left: 0;
        bottom:0;
        opacity: 0;
        filter:alpha(opacity=0);
        cursor:pointer;
    }
    .imgs{
        background-size: cover;
        background-image: url("");
        background-position: ;
        background-size: ;
        background-repeat: ;
    }
</style>

<body>
<form>
    <p style="text-align:center">
        <span style="font-size:1rem;font-weight: bold">悬赏两万元通缉珍湘酒 - 作品上传</span>
    </p>
    <br />
    <img src="__STATIC__/home/images/works_top.jpg" style="width: 100%; height: auto;">
    <div class="weui-cells weui-cells_form">

        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">作品上传</label>
            </div>
            <div class="form-item">
                <div class="controls">
                    <div class="fileInputContainer imgs" style="background: url('/static/home/images/upload.png') no-repeat 50% 50%; background-size: cover;">
                        <input class="fileInput" type="file" name="fb_img"  id="img" />
                    </div>
                </div>
            </div>
        </div>
        <span style="display: block;color:red; font-size:.14rem; text-align:center">请上传6M以内的图片</span>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="username" placeholder="请输入姓名">
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">手机号码</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" name="tel" placeholder="请输入手机号码">
            </div>
        </div>

    </div>

</form>
<div class="demos-content-padded" style="padding: 15px;">
    <a href="javascript:;" class="weui-btn weui-btn_primary send_form">提交作品</a>
</div>

<script src="__STATIC__/home/jquery_weui/js/jquery-2.1.4.js"></script>
<script src="__STATIC__/home/jquery_weui/js/jquery-weui.min.js"></script>
{js href="__PUBLIC__static/home/js/exif.js" /}
<script>
    $(function () {
        var image;
        //获取上传文件的url
        function getObjectURL(file)
        {
            var url = null;
            if (window.createObjectURL != undefined)
            {
                url = window.createObjectURL(file);
            }
            else if (window.URL != undefined)
            {
                url = window.URL.createObjectURL(file);
            }
            else if (window.webkitURL != undefined)
            {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
        <!--图片上传-->
        $("#img").change(function(){
            var filess = this.files[0];
            var src=getObjectURL(filess);//获取上传文件的路径
            $('.fileInputContainer').css({
                backgroundImage:'url('+src+')',
                backgroundPosition:'50% 50%',
                backgroundSize:'cover',
                backgroundRepeat:'no-repeat'
            });
            var formData = new FormData();
            formData.append("fb_img",this.files[0]);

            $.ajax({
                url:"{:url('upload')}",
                data:formData,
                processData: false,
                contentType: false,
                type:"post",
                dataType :'json',
                success:function(data){
                    console.log(data);
                    if(data.code == 200){
                        image = data.msg;
                    }
                },
            });
        });


        $(".send_form").click(function () {
            console.log("img:"+image);
            var username = $('input[name="username"]').val();
            var img = image;
            var tel = $('input[name="tel"]').val();

            if(!img){
                $.toptip('请选择一张照片', 'error');
                return false;
            }

            // 检查数据
            if (!$('input[name="username"]').val()) {
                $('input[name="username"]').focus();
                $.toptip('请输入您的姓名', 'error');
                return false;
            }
            if (!$('input[name="username"]').val().match(/^[\u4E00-\u9FA5]{2,4}$/)) {
                $('input[name="username"]').focus();
                $.toptip('姓名格式不正确', 'error');
                return false;
            }

            if (!$('input[name="tel"]').val()) {
                $('input[name="tel"]').focus();
                $.toptip('请输入您的手机号码', 'error');
                return false;
            }

            if (!$('input[name="tel"]').val().match(/^0?(13|14|15|17|18)[0-9]{9}$/)) {
                $.toptip('手机号码格式不正确', 'error');
                $('input[name="tel"]').focus();
                return false;
            }

            $.post(
                "{:url('works')}",
                {username:username, tel:tel, img:img},
                function(data){
                    if(data.code == 200){
                        alert(data.msg);
                        window.location.href="http://www.hnjyxh.com/index/activity/info/id/347.html";
                    }
                },'json'
            )

        });
    });

</script>
</body>
</html>